<template>
  <div>
    <span v-for="(item, index) in funcPowerObj" :key="index">
      
      <!-- 1.新增 -->
      <a-tooltip placement="top">   
        <template slot="title" v-if="!functionListShow">
          <span>{{ $t('app.setting.operation.add') }}</span>
        </template>
        <a-button type="primary" @click="eventListenToTop('add')" v-if="item.add">
          <a-icon type="plus" />
          <span>{{ functionListShow?$t('app.setting.operation.add'):'' }}</span>
        </a-button>
      </a-tooltip>

      <!-- 2.删除 -->
      <a-tooltip placement="top">
        <template slot="title" v-if="!functionListShow">
          <span>{{ $t('app.setting.operation.delete') }}</span>
        </template>
        <a-button type="primary" @click="eventListenToTop('removeItem') " v-if="item.delete">
          <a-icon type="delete" />
          <span>{{ functionListShow?$t('app.setting.operation.delete'):'' }}</span>
        </a-button>
      </a-tooltip>

      <!-- 3.修改 -->
      <a-tooltip placement="top">
        <template slot="title" v-if="!functionListShow">
          <span>{{ $t('app.setting.operation.edit') }}</span>
        </template>
        <a-button type="primary" @click="eventListenToTop('editItem')" v-if="item.edit">
          <a-icon type="edit" />
          <span>{{ functionListShow?$t('app.setting.operation.edit'):'' }}</span>
        </a-button>
      </a-tooltip>

      <!-- 4.刷新 -->
      <a-tooltip placement="top">
        <template slot="title" v-if="!functionListShow">
          <span>{{ $t('app.setting.operation.reload') }}</span>
        </template>
        <a-button type="primary" @click="eventListenToTop('reloadMsg')" v-if="item.reload">
          <a-icon type="undo" />
          <span>{{ functionListShow?$t('app.setting.operation.reload'):'' }}</span>
        </a-button>
      </a-tooltip>

      <!-- 5.卡片 -->
      <a-tooltip placement="top">
        <template slot="title" v-if="!functionListShow">
          <span>{{ $t('app.setting.operation.cardTableView') }}</span>
        </template>
        <a-button type="primary" @click="eventListenToTop('switchCardTable')" v-if="item.cardTableView">
          <a-icon type="switcher" />
          <span>{{ functionListShow?$t('app.setting.operation.cardTableView'):'' }}</span>
        </a-button>
      </a-tooltip>

      <!-- 6.列 -->
      <a-tooltip placement="top">
        <template slot="title" v-if="!functionListShow">
          <span>{{ $t('app.setting.operation.column') }}</span>
        </template>
        <a-dropdown v-model="visible" v-if="item.column">
          <a-button type="primary" @click="e => e.preventDefault()">
            <a-icon type="appstore" />
            <span>{{ functionListShow?$t('app.setting.operation.column'):'' }}</span>
            <a-icon type="down" />
          </a-button>
          <a-menu slot="overlay" @click="handleMenuClick">
            <a-menu-item v-for="(item, index ) in data" :key="index">
              <a-checkbox @change="e => onChange(e, item, index)"  :defaultChecked="true">
                <span>{{item.title}}</span>
              </a-checkbox>
            </a-menu-item>
          </a-menu>
        </a-dropdown>
      </a-tooltip>

      <!-- 7.导出 -->
      <a-tooltip placement="top">
        <template slot="title" v-if="!functionListShow">
          <span>{{ $t('app.setting.operation.export') }}</span>
        </template>
        <a-button type="primary" @click="eventListenToTop('download')" v-if="item.export">
          <a-icon type="download" />
          <span>{{ functionListShow?$t('app.setting.operation.export'):'' }}</span>
        </a-button>
      </a-tooltip>
    </span>
  </div>
</template>

<script>


import { i18nRender } from '@/locales'
import { setDocumentTitle, domTitle } from '@/utils/domUtil'
import store from '../../../src/store'


export default {
  name: 'FunctionOperation',
  components: {
  
  },
  
  props: {
    functionListShow: Boolean,
    funcPowerObj: Object,
    data: Object
  },

  data () {
    return {
      visible: false,
    }
  },

  created(){
  
  },

  mounted(){

  },

  methods: {

    handleMenuClick(e) {
      if (e.key === '3') {
        this.visible = false;
      }
    },


    onChange(e, item, index){
      let obj = {
        e: e,
        item: item,
        index: index
      }
      this.$emit("onChange", obj)
    },


    eventListenToTop(e){
      switch(e){
        case 'add':
          this.$emit("EventAdd", 'add')
          break;
        case 'removeItem':
          this.$emit("EventRemoveItem", 'removeItem')
          break;
        case 'editItem':
          this.$emit("EventEditItem", 'editItem')
          break;
        case 'reloadMsg':
          this.$emit("EventReloadMsg", 'reloadMsg')
          break;
        case 'switchCardTable':
          this.$emit("EventSwitchCardTable", 'switchCardTable')
          break;
        case 'download':
          this.$emit("EventDownload", 'download')
          break;
      }
    }
  }
}
</script>

<style lang="less" scoped>
  
</style>
